<template>
  <!-- 我们最终处理完的页面都会被渲染到app根组件中, 动态控制 app 的类名
    one    two    three
    blue   pink   green
  -->
  <div id="app" :class="obj">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      // obj: {
      //   three: true
      // }
    }
  },
  computed: {
    obj() {
      let themeClass = ''
      // 如果选择是第一个颜色, 设置 one
      if (this.$store.getters.themeColor === '#409EFF') {
        themeClass = 'one'
      }
      // 如果选择是第二个颜色, 设置 two
      if (this.$store.getters.themeColor === '#1890FF') {
        themeClass = 'two'
      }
      // 如果选择是第三个颜色, 设置 three
      if (this.$store.getters.themeColor === '#304156') {
        themeClass = 'three'
      }
      return { [themeClass]: true }
    }
  }
}
</script>
